<template>
	<view class="step-panel">
		<view class="tools">
			<!-- <view>
				<wd-input v-model="searchKey" placeholder="工序名称" suffix-icon="search" @blur="searchProcess"></wd-input>
			</view> -->
			<view>
				<view class="dragArea list-group" id="dragAreaLeft" :list="stepList" :data="processList"
					:change:data="Sortable.getData" :change:list="Sortable.getList">
					<view v-for="(element, index) in processList" :key="index" class="item">
						{{ element.processName }}
					</view>
				</view>
			</view>
		</view>
		<!-- <movable-area :scale-area="true"
			:style="{ 'width': '98vw', 'height': '1100rpx', 'overflow': 'hidden', 'backgroundColor': '#edeff6' }">
			<movable-view direction="all" :inertia="true" out-of-bounds :scale-min="0.01" :scale-max="4" :scale="true"
				:scale-value="0.1" :style="{ 'width': 'auto ', 'height': 'auto' }"> -->
		<view class="pancel" ref="pancelRef">
			<view class="step-list" :class="!stepList.length ? 'no-data' : ''">
				<view class="dragArea" id="dragAreaRight">
					<view class="item" v-for="(element, index ) in stepList" :key="index"
						:class="[stepList.length === index + 1 && 'last', (element.processName === '报检' || element.processName === '终检') && 'center-ctrl']">

						<view class="l-table" v-if="element.processName == '中控'">
							<view class="table-container bordered">
								<table class="analysis-table ">
									<tbody>
										<tr>
											<th>分析手段</th>
											<th>检验指标</th>
										</tr>
										<tr align="center" v-for="(item, rowindex) in element.checkList" :key="rowindex">
											<td :class="item.status == 4 ? 'td__abandon' : ''">
												<view class="select-wrap"
													v-if="!element.disabled && item.status != 4 && item.recallFlag != 1">
													<view class="input"
														@click="() => showAnalyDialog(rowindex, index, item.analysisId)">
														<text class="label">{{ item.analysisName || '请选择' }}</text>
														<text class="arrow cuIcon-right"></text>
													</view>
												</view>
												<view v-else>{{ item.analysisName }}</view>
												<!-- <wd-select-picker type="radio" :show-confirm="false"
															v-model="item.analysisId" value-key="analysisId"
															label-key="analysisName" :columns="analysisOptions"
															style="background-color: transparent;"
															@change="(e) => changeAnalysis(e, item)" filterable /> -->

												<view class="add-dosage">
													<wd-button type="icon" icon="add-circle" primary
														style="font-size: 34rpx; color:#4d80f0;"
														@click="addCheck(element.checkList, item, rowindex)">
													</wd-button>
													<wd-button type="icon" icon="delete" danger v-if="item.recallFlag != 1"
														style="font-size: 34rpx; color:#fa4350;"
														@click="removeCheck(element.checkList, item, rowindex)">
													</wd-button>
													<wd-button type="icon" icon="close-circle" danger
														v-if="item.recallFlag == 1 && item.status != 4"
														style="font-size: 36rpx; color:#fa4350;"
														@click="() => item.status = 4">
													</wd-button>
													<wd-button type="icon" icon="close-circle" danger
														v-if="item.recallFlag == 1 && item.status == 4"
														style="font-size: 36rpx; color:#fa4350;"
														@click="() => item.status = null">
													</wd-button>
													<wd-button type="icon" icon="edit-outline" danger
														v-if="item.recallFlag == 1" style="font-size: 34rpx; color:#fa4350;"
														@click="changeCheck(element.checkList, item, rowindex)">
													</wd-button>
												</view>
											</td>
											<td :class="item.status == 4 ? 'td__abandon' : ''">
												<wd-input v-if="item.status != 4 && item.recallFlag != 1"
													v-model="item.itemName" clearable no-border
													style="background-color: transparent" use-suffix-slot
													placeholder="请选择或输入检测指标">
													<template #suffix>
														<wd-icon name="arrow-down" size="22px"
															@click="() => showItemNameList(item, index, rowindex)"></wd-icon>
													</template>
												</wd-input>
												<view v-else>{{ item.itemName }}</view>
												<!-- <wd-select-picker type="radio" :show-confirm="false" v-model="item.itemName"
													:columns="item.indexEntities" style="background-color: transparent;" /> -->
											</td>
										</tr>
									</tbody>
								</table>
							</view>
						</view>
						<view class="l-table" v-else>
							<view class="table-container"
								:class="element.putIntoFlag && element.dosageList && element.dosageList.length ? 'bordered' : ''">
								<table class="analysis-table" v-if="element.putIntoFlag">
									<tbody>
										<tr>
											<th style="width: 160rpx; min-width: 8.2rem;">名称</th>
											<th>规格</th>
											<th>用量</th>
											<th style="width: 160rpx; min-width: 4.2rem;">单位</th>
										</tr>
										<tr align="center" v-for="(row, rowIndex) in element.dosageList" :key="rowIndex">
											<td :class="row.status == 4 ? 'td__abandon' : ''">
												<view class="select-wrap"
													v-if="!element.disabled && row.status != 4 && !row.recallFlag">
													<view class="input"
														@click="() => showDialog(rowIndex, index, row.invName)">
														<text class="label">{{ row.invName || '请选择' }}</text>
														<text class="arrow cuIcon-right"></text>
													</view>
												</view>
												<text v-else>{{ row.invName }}</text>
												<view class="add-dosage" v-if="isRecord && element.putIntoFlag">
													<wd-button type="icon" icon="add-circle" primary
														style="font-size: 34rpx; color:#4d80f0;"
														@click="addDosage(element.dosageList, row, rowIndex)">
													</wd-button>
													<wd-button type="icon" icon="delete" danger v-if="row.recallFlag != 1"
														style="font-size: 34rpx; color:#fa4350;"
														@click="removeDosage(element.dosageList, row, rowIndex)">
													</wd-button>
													<wd-button type="icon" icon="close-circle" danger
														v-if="row.recallFlag == 1 && row.status != 4"
														style="font-size: 36rpx; color:#fa4350;"
														@click="() => row.status = 4">
													</wd-button>
													<wd-button type="icon" icon="close-circle" danger
														v-if="row.recallFlag == 1 && row.status == 4"
														style="font-size: 36rpx; color:#fa4350;"
														@click="() => row.status = null">
													</wd-button>
													<wd-button type="icon" icon="edit-outline" danger
														v-if="row.recallFlag == 1" style="font-size: 34rpx; color:#fa4350;"
														@click="changeDosage(element.dosageList, row, rowIndex)">
													</wd-button>
												</view>
											</td>
											<td :class="row.status == 4 ? 'td__abandon' : ''">{{ row.invStd }}
											</td>
											<td :class="row.status == 4 ? 'td__abandon' : ''">
												<wd-input v-if="row.status != 4 && row.recallFlag != 1" v-model="row.dosage"
													clearable type="number" no-border
													style="background-color: transparent;" />
												<text v-else> {{ row.dosage }}</text>

											</td>
											<td :class="row.status == 4 ? 'td__abandon' : ''">{{ row.unit }}
											</td>
										</tr>
									</tbody>
								</table>
							</view>

						</view>

						<view class="content-container">
							<wd-button v-if="element.processName !== '终检' && !element.undraggable" type="icon" icon="delete"
								class="remove-btn" @click="removeStep(element, index)">
							</wd-button>
							<view v-for="(prop, i) in element.inspectionList" :key="i" class="btn-box"
								:style="{ marginRight: i != 0 ? i * 20 + 'px' : '0', fontSize: '12px' }">
								<wd-popover v-model="prop.show" mode="menu" placement="right"
									:content="renderPopLIst(element, prop)"
									@menuclick="({ item }) => menuAction(item, element, i, prop)">
									<wd-button plain hairline :class="['add-btn', prop.id ? 'add-btn__color' : '']"
										size="small" shape="circle">
										检{{ i + 1 }}
									</wd-button>
								</wd-popover>
							</view>

							<!-- <wd-popover v-model="element.show" mode="menu" placement="top"
								:content="zjRenderPopLIst(element)"
								@menuclick="({ item }) => menuAction(item, element, i)"
								v-if="isRecord && element.processName === '终检'">
								<view :class="['content', element.bgId ? 'content__color' : '']">
									{{ element.processName }}
								</view>

							</wd-popover> -->
							<view class="content"
								:class="['drag-target', element.disabled || element.undraggable ? 'undraggable' : '']"
								@click.stop="openDrawer(element, index)">
								{{ element.processName }}
							</view>



							<view v-if="element.putIntoFlag || element.processName == '中控'" class="left-line">
							</view>
							<view v-if="element.paramList && element.paramList.length || element.processName == '中控'"
								class="right-line"></view>
							<view class="bottom-line">
								<view class="line"></view>
								<view class="arrow"></view>
							</view>
						</view>
						<view class=" r-table bordered" v-if="element.processName == '中控'">
							<view class="table-container">
								<table class="analysis-table"
									v-if="element.sampletimeList && element.sampletimeList.length">
									<tbody>
										<tr>
											<th>取样实际描述</th>
											<th>取样时机</th>
										</tr>
										<tr align="center" v-for="(item, rowindex) in element.sampletimeList" :key="index">
											<td :class="item.status == 4 ? 'td__abandon' : ''">
												<wd-input v-model="item.sampleDesc" clearable no-border
													v-if="item.status != 4 && item.recallFlag != 1"
													style="background-color: transparent;" placeholder="请输入" />
												<view v-else>{{ item.sampleDesc }}</view>
												<view class="add-dosage">
													<wd-button type="icon" icon="add-circle" primary
														style="font-size: 34rpx; color:#4d80f0;"
														@click="addSample(element.sampletimeList, item, rowindex)">
													</wd-button>
													<wd-button type="icon" icon="delete" danger v-if="item.recallFlag != 1"
														style="font-size: 34rpx; color:#fa4350;"
														@click="removeSample(element.sampletimeList, item, rowindex)">
													</wd-button>
													<wd-button type="icon" icon="close-circle" danger
														v-if="item.recallFlag == 1 && item.status != 4"
														style="font-size: 36rpx; color:#fa4350;"
														@click="() => item.status = 4">
													</wd-button>
													<wd-button type="icon" icon="close-circle" danger
														v-if="item.recallFlag == 1 && item.status == 4"
														style="font-size: 36rpx; color:#fa4350;"
														@click="() => item.status = null">
													</wd-button>
													<wd-button type="icon" icon="edit-outline" danger
														v-if="item.recallFlag == 1" style="font-size: 34rpx; color:#fa4350;"
														@click="changeSample(element.sampletimeList, item, rowindex)">
													</wd-button>
												</view>
											</td>
											<td :class="item.status == 4 ? 'td__abandon' : ''">
												<wd-input v-model="item.sampleTime" clearable no-border
													v-if="item.status != 4 && item.recallFlag != 1"
													style="background-color: transparent;" placeholder="请输入" />

												<view v-else>{{ item.sampleTime }}</view>
											</td>
										</tr>
									</tbody>
								</table>
							</view>
						</view>
						<view class="r-table" :class="element.paramList && element.paramList.length ? 'bordered' : ''"
							v-else>
							<view class="mb1" v-if="isRecord && element.paramList && element.paramList.length">
								<wd-button class="mr4" plain hairline size="small" disabled type="primary">开始
								</wd-button>
								<view style="flex:1;height:70rpx;line-height:70rpx;margin-left:20rpx;">
									<uni-datetime-picker type="datetime" return-type="string" v-model="element.startTime"
										placeholder="开始日期" disabled />
								</view>
								<view style="margin-left:20rpx" @click="() => editModal1(element, index)">
									<wd-icon name="fullsreen" size="22px"></wd-icon>
								</view>

							</view>
							<view class="table-container">
								<table class="analysis-table" v-if="element.paramList && element.paramList.length">
									<tbody>
										<tr>
											<th style="width: 160rpx;">参数</th>
											<th style="width: 160rpx;">目标值</th>
											<th style="width: 160rpx;">数值</th>
											<th style="width: 160rpx;">单位</th>
											<th style="width: 160rpx;"
												v-if="element.dosageList && element.dosageList.length">
												<view class="item-center">
													<text>用料名称</text>
												</view>
											</th>
											<th style="width: 200rpx;">操作时间</th>
										</tr>
										<tr align="center" v-for="(item, rowindex) in element.paramList?.slice(0, 10)"
											:key="index">
											<td :class="item.status == 4 ? 'td__abandon' : ''">
												<text>{{ item.paramName }}</text>
											</td>
											<td :class="item.status == 4 ? 'td__abandon' : ''"><text>{{
												item.schemeParamValue }}</text></td>
											<td :class="item.status == 4 ? 'td__abandon' : ''">
												{{ item.paramValue }}
											</td>
											<td :class="item.status == 4 ? 'td__abandon' : ''">
												<text>{{ item.paramUnit }}</text>
											</td>
											<td :class="item.status == 4 ? 'td__abandon' : ''"
												v-if="element.dosageList && element.dosageList.length">
												{{ item.invName }}
											</td>
											<td :class="item.status == 4 ? 'td__abandon' : ''"> {{
												formatTime(item.operateTime) }}
											</td>
										</tr>
									</tbody>
								</table>
							</view>
							<view class="mb1 mt1" v-if="isRecord && element.paramList && element.paramList.length">
								<wd-button class="mr4" plain hairline size="small" disabled type="primary">结束
								</wd-button>
								<view style="flex:1;height:70rpx;line-height:70rpx;margin-left:20rpx;">
									<uni-datetime-picker type="datetime" return-type="string" v-model="element.endTime"
										placeholder="结束日期" disabled />
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- </movable-view>
		</movable-area> -->
		<ppopup-select :options="props.materialList" :value="dosageInvName" :show="showDosageDialog"
			:kv="{ label: 'invName', value: 'invName' }" @change="(e) => onSelectMaterial(e)"
			@hideModal="(e) => showDosageDialog = e" />

		<ppopup-select :options="analysisOptions" :value="analysisId" :show="showAnalysisDialog"
			:kv="{ label: 'analysisName', value: 'analysisId' }" @change="(e) => changeAnalysis(e)"
			@hideModal="(e) => showAnalysisDialog = e" />
		<wd-popup v-model="openDrawerVis" position="right" custom-style="width: 60%;" :z-index="100">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="action" @tap="closeDrawer">取消</view>
					<view class="action text-blue mks" @tap="saveElementForm">确定</view>
				</view>
				<view class="filter_container">
					<view class="block">
						<view class="label">现象描述</view>
						<view class="row">
							<wd-textarea type="textarea" auto-height v-model="elementForm.description" placeholder="请输入现象描述"
								clearable style="width: 100%" no-border>
							</wd-textarea>
						</view>
					</view>
					<view class="block">
						<view class="label">附件</view>

						<view class="row">
							<view>
								<uploadFile @complete="uploadComplete"></uploadFile>
							</view>

							<view class="list-picture">
								<view class="list-item" v-for="(item, index) in fileList">
									<view class="list-item-thumbnail">
										<image :width="48" :height="48" :src="item.url" v-if="isImage(item.url)"
											mode="scaleToFill" @click="preview(item.url)" />
										<view v-else class="txt" @click="previewWeb(item.url)">{{ item.url.replace(/.*\./,
											'') }}</view>
									</view>
									<text class="list-item-name">附件{{ index + 1 }}</text>
								</view>
							</view>
							<!-- <wd-textarea type="textarea" auto-height v-model="elementForm.description" placeholder="请输入现象描述"
								clearable style="width: 100%" no-border>
							</wd-textarea> -->
						</view>
					</view>
				</view>
			</view>
		</wd-popup>
		<edit-table :show="showEditTable" :dataList="tableData" @hideModal="showEditTable = false" :elementDTO="elementDTOS"
			@confirm="setProcess"></edit-table>
		<wd-action-sheet v-model="showItemName" :actions="itemNamcolumns" @close="closeItemNam" @select="selectItemNam" />
	</view>
</template>

<script lang="ts">
import {
	defineComponent,
	watch,
	ref,
	computed,
	onMounted,
	nextTick
} from 'vue'
import dayjs from 'dayjs';
import {
	queryProcessList
} from '@/service/pm-record';
import {
	analysisList, ccFormInfoByExperimentRecord
} from '@/service/pm-assay';
import showModal from '@/utils/modal'
import {
	useDict
} from '@/hooks/dict';
import EditTable from './editTable/index.vue';
// import TimePicker from '@/components/uni-datetime-picker/components/uni-datetime-picker/time-picker.vue';
// import { time } from 'console';
import PpopupSelect from './popupSelect/index.vue'
// import dateTimePicker from "@/components/dateTimePicker.vue";
// import GestureJs from '@/utils/gesture.ts'


export default defineComponent({
	components: {
		EditTable,
		// TimePicker,
		PpopupSelect
	},
	props: {
		modelValue: {
			type: Array,
			default: () => []
		},
		materialList: {
			type: Array,
			default: () => []
		},
		mode: {
			type: String,
			default: 'scheme'
		}
	},
	emits: ['change', 'remove', 'update:modelValue', 'update:modelDisabled', 'createRecord'],
	setup(props, { emit }) {

		const showEditTable = ref(false);

		const isScheme = computed(() => {
			return props.mode === 'scheme';
		});

		const isRecord = computed(() => {
			return props.mode === 'record';
		});
		const stepList = ref([]);
		const pancelRef = ref();
		const fileList = ref([])
		const processList = ref([{
			processName: '报检',
			putIntoFlag: false,
		}]);


		watch(
			() => props.modelValue,
			(val) => {
				stepList.value = [...val];
				// stepList.value.forEach(item => {
				// 	item.paramList && item.paramList.forEach((param) => {
				// 		if (param.operateTime) {
				// 			if (param.operateTime.split(' ')[1]) {
				// 				param.operateTime = param.operateTime.split(' ')[1]
				// 			}

				// 		}
				// 	})

				// })
			}, {
			immediate: true,
			deep: true,
		}
		);
		const {
			unit: unitList
		} = useDict('unit');

		const searchKey = ref('');
		const searchProcess = function (e) {
			console.log(e)
			getProcessList(e.value)
		}
		const getProcessList = function (processName = '复配投料') {
			queryProcessList({ processName, pageSize: 999 })
				.then((res) => {
					// res.data = res.data.records;
					console.log(res.data)
					if (res.data) {
						res.data.forEach((item) => {
							if (item.putIntoFlag && !item.dosageList?.length) {
								item.dosageList = [{ invName: null, dosage: '', unit: null }];
							}

							item.paramList =
								item.baseParamInfos &&
								item.baseParamInfos.map((param) => {
									param.paramUnitList = param.paramUnitList.map(val => {
										return {
											name: val
										}
									})
									delete param.id;
									return param;
								});
							delete item.id;
							delete item.baseParamInfos;
						});
						processList.value = [
							{
								processName: '报检',
								putIntoFlag: false,
							},
							// {
							// 	processName: '中控',
							// 	sampletimeList: [{
							// 		sampleDesc: '',
							// 		sampleTime: ''
							// 	}],
							// 	checkList: [{
							// 		analysisId: '',
							// 		analysisName: '',
							// 		itemName: ''
							// 	}]
							// },
							// {
							//   processName: '终检',
							//   putIntoFlag: false,
							// },
							// ...res.data,
						];
					}
				})
		};

		const dropHandle = (ele, index) => {
			// 工序有id才允许托
			if (ele.element?.id) {
				const eleCopy = JSON.parse(JSON.stringify(ele));
				eleCopy.show = false
				delete eleCopy.id;
				stepList.value[index].inspectionList.push(eleCopy);
				emit('update:modelValue', stepList.value);
			} else {
				showModal({
					title: '提示',
					content: `当前实验记录还未生成，是否生成实验记录。`,
					cancelColor: '#333333',
					confirmColor: '#2d84fb',
					cancelText: '否',
					confirmText: '是',
					confirm: () => {
						console.log('取消')
					},
					cancel: () => {
						emit('createRecord')
					}
				})
			}
		};

		const removeInspection = (element, index) => {
			element.inspectionList.splice(index, 1);
			emit('update:modelValue', stepList.value);
		};

		const openDrawerVis = ref(false);
		const elementForm = ref({
			description: '',
		});
		const eleIndex = ref(null);

		const openDrawer = (ele, index) => {
			if (props.mode === 'scheme' || ['中控', '终检'].includes(ele.processName)) return;
			openDrawerVis.value = true;
			elementForm.value.description = ele.description;
			elementForm.value.attachment = ele.attachment
			eleIndex.value = index;
			console.log(ele.attachment)
			if (ele.attachment) {
				fileList.value = elementForm.value.attachment.split(',').map((item) => {
					return {
						url: item,
					};
				});
			} else {
				fileList.value = []
				console.log(fileList.value)
			}
		};

		const closeDrawer = () => {
			openDrawerVis.value = false;
			elementForm.value.description = ''
			fileList.value = []

		}
		const saveElementForm = () => {
			const list = fileList.value.map(item => item.url)
			stepList.value[eleIndex.value].description = elementForm.value.description;
			stepList.value[eleIndex.value].attachment = list.length && list.join(',') || "";

			closeDrawer()
			emit('update:modelValue', stepList.value);
		}



		const menuAction = (item, ele, i?, prop?) => {
			switch (item.content) {
				case '去报检':
					toInspection(ele)
					break;
				case '报检单':
					toInspectionView(prop, i)
					break;
				case '报检结果':
					toInspectionList(ele, i)
					break;
				case '删除':
					removeInspection(ele, i)
					break;
				default:
					break;
			}
		}

		const zjRenderPopLIst = (ele) => {
			const list = []

			if (ele.id && !ele.bgId) {
				list.push({
					content: '去报检',
				})
			}

			if (ele.bgId) {
				list.push({
					content: '报检结果',
				})
			}
			return list
		}

		const renderPopLIst = (ele, item) => {
			const list = []

			if (!item.checkId) {
				list.push({
					content: '去报检',
				})
			}
			if (item.checkId) {
				list.push({
					content: '报检单',
				})
			}

			if (item.id) {
				list.push({
					content: '报检结果',
				})
			}

			if (!item.checkId) {
				list.push({
					content: '删除',
				})
			}

			return list
		}


		const processIndex = ref(null);
		const tableData = ref([])
		const elementDTOS = ref({})
		const editModal1 = (ele, index) => {
			processIndex.value = index
			showEditTable.value = true
			elementDTOS.value = JSON.parse(JSON.stringify(ele))
			tableData.value = JSON.parse(JSON.stringify(ele.paramList));
			tableData.value.forEach(item => {
				item.processName = ele.processName
			})
			tableData.value.unshift({
				recallFlag: ele.recallFlag,
				processName: ele.processName,
				paramValue: '-',
				title: '开始：',
				operateTime: ele.startTime,
			})
			tableData.value.push({
				recallFlag: ele.recallFlag,
				processName: ele.processName,
				paramValue: '-',
				title: '结束：',
				operateTime: ele.endTime,
			})
		}

		const setProcess = (data) => {
			stepList.value[processIndex.value].startTime = data[0].operateTime
			let day = '';
			if (data[0].operateTime) {
				day = dayjs().format('YYYY-MM-DD ')
			} else {
				day = dayjs().format('YYYY-MM-DD ')
			}

			stepList.value[processIndex.value].paramList = data.slice(1, data.length - 1)

			stepList.value[processIndex.value].endTime = data[data.length - 1].operateTime
		}
		const toInspectionList = function (element, index) {
			const type = element.processName === '终检' ? 1 : 0;
			const path = `/pages/pm/assay-report/form?id=${element.inspectionList[index].id}&type=${type}&t=qcMiddleReport`

			uni.navigateTo({
				url: path,
			});
		};

		const toInspectionView = function (element) {
			const path = `/pages/pm/assay-form/form?id=${element.checkId}&checkCode=${element.checkCode}&t=qcMiddleCheck`;
			uni.navigateTo({
				url: path,
			});
		}


		const toInspection = function (element) {
			// const query = element.processName === '终检' ? {
			// 	pid: element.id,
			// 	type: 1
			// } : {
			// 	id: element.id,
			// 	type: 0
			// };
			if (!element.id) {
				showModal({
					title: '提示',
					content: `当前实验记录还未生成，是否生成实验记录。`,
					cancelColor: '#333333',
					confirmColor: '#2d84fb',
					cancelText: '否',
					confirmText: '是',
					confirm: () => {
						console.log('取消')
					},
					cancel: () => {
						emit('createRecord')
					}
				})
				return
			}
			const type = element.processName === '终检' ? 1 : 0;
			const path = `/pages/pm/assay-form/form?id=${element.id}&type=${type}`

			if (element.processName === '终检') {
				ccFormInfoByExperimentRecord(element.id, 1)
					.then((res) => {
						if (res.data) {
							uni.navigateTo({ url: path });
						} else {
							uni.showToast({
								mask: true,
								title: res.msg,
								icon: 'none',
							});
						}

					})
					.catch((err) => {
						uni.showToast({
							mask: true,
							title: err.msg,
							icon: 'none',
						});
					});
			} else {
				uni.navigateTo({ url: path });
			}
		};

		const setStartTime = function (element) {
			if (!element.startTime) {
				element.startTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
			}
		};

		const setEndTime = function (element) {
			if (!element.startTime) {
				uni.showToast({
					mask: true,
					title: `开始后才能结束`,
					icon: 'none',
				});
				return;
			}
			if (dayjs(element.startTime).millisecond() > dayjs(element.endTime).millisecond()) {
				uni.showToast({
					mask: true,
					title: `结束日期不能小于开始日期`,
					icon: 'none',
				});
				return;
			}
			if (!element.endTime) {
				element.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
			}
		};

		const changeEndTime = (e, element) => {
			if (!element.startTime) {
				uni.showToast({
					mask: true,
					title: `开始日期不能为空`,
					icon: 'none',
				});
				nextTick(() => {
					element.endTime = ''
				})
				return
			}
			if (dayjs(element.startTime).millisecond() > dayjs(e).millisecond()) {
				uni.showToast({
					mask: true,
					title: `结束日期不能小于开始日期`,
					icon: 'none',
				});

				nextTick(() => {
					element.endTime = ''
				})
				return;
			}

		}
		const findZJIndex = () => {
			const index = stepList.value.findIndex(item => item.processName === '终检')
			return index
		}

		const uploadComplete = (ref) => {
			const { url } = ref;
			fileList.value.push({
				url: url,
			});

		}
		const onStepChange = function (e) {

			const m = e.added || e.moved;
			if (m.processName === '报检') {
				return dropHandle(m, m.newIndex)
			}
			stepList.value.splice(m.newIndex, 0, m.element)

			const zjIndex = findZJIndex();
			if (zjIndex !== stepList.value.length - 1 && e.added && zjIndex > -1) {
				stepList.value.splice(zjIndex + 1, stepList.value.length - zjIndex - 1)
			}

			emit('change', stepList.value);
			emit('update:modelValue', stepList.value);

			if (m.newIndex === stepList.value.length - 1) {
				if (pancelRef.value) {
					pancelRef.value.scrollTo({
						top: pancelRef.value.scrollHeight,
						behavior: 'smooth',
					});
					// stepListRef.value.scrollTop = stepListRef.value.scrollHeight;
					// stepListRef.value.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'end' });
				}
			}

		};


		const removeStep = function (element, index: number) {
			emit('remove', element, index);
			console.log(index);
			stepList.value.splice(index, 1);
			emit('update:modelValue', stepList.value);
		};



		const addDosage = function (dosageList, row, rowIndex) {
			const newRow = {
				invName: '',
				dosage: '',
				unit: null
			};
			dosageList.splice(rowIndex + 1, 0, newRow);
		};
		const removeDosage = function (dosageList, row, rowIndex) {
			if (dosageList.length <= 1) {
				uni.showToast({
					mask: true,
					title: `请至少保留一个用料！`,
					icon: 'none',
				});
				return;
			}
			dosageList.splice(rowIndex, 1);
		};

		const changeDosage = function (dosageList, row, rowIndex) {
			row.status = 4;
			addDosage(dosageList, row, rowIndex)
		}

		const addParam = function (paramList, row, rowIndex) {
			const newRow = {
				frequencyFlag: row.frequencyFlag,
				paramName: row.paramName,
				paramUnit: row.paramUnit,
				schemeId: row.schemeId,
				valueType: row.valueType,
				paramValue: '',
				operateTime: dayjs().format('HH:mm:ss'),
			};
			paramList.splice(rowIndex + 1, 0, newRow);
		};
		const removeParam = function (paramList, row, rowIndex) {
			const currentTypeList = paramList.filter((item) => item.paramName === row.paramName);
			if (currentTypeList.length <= 1) {
				uni.showToast({
					mask: true,
					title: `请至少保留一个${row.paramName} 参数`,
					icon: 'none',
				});
				return;
			}
			paramList.splice(rowIndex, 1);
		};

		const addCheck = function (checkList, row, rowIndex) {
			const newRow = { invName: null, dosage: '', unit: null };
			checkList.splice(rowIndex + 1, 0, newRow);
		};
		const removeCheck = function (checkList, row, rowIndex) {
			if (checkList.length <= 1) {
				uni.showToast({
					mask: true,
					title: `请至少保留一个分析手段`,
					icon: 'none',
				});
				return;
			}
			checkList.splice(rowIndex, 1);
		};

		const abandonCheck = function (row) {
			row.status = 4
		}

		const changeCheck = function (checkList, row, rowIndex) {
			abandonCheck(row)
			addCheck(checkList, row, rowIndex)
		}


		const addSample = function (paramList, row, rowIndex) {
			const newRow = {
				sampleDesc: row.sampleDesc,
				sampleTime: row.sampleTime,
			};
			paramList.splice(rowIndex + 1, 0, newRow);
		};
		const removeSample = function (paramList, row, rowIndex) {
			if (paramList.length <= 1) {
				uni.showToast({
					mask: true,
					title: `请至少保留一个`,
					icon: 'none',
				});
				return;
			}
			paramList.splice(rowIndex, 1);
		};

		const changeSample = function (paramList, row, rowIndex) {
			row.status = 4;
			addSample(paramList, row, rowIndex)
		}


		const formatTime = function (time) {
			if (!time) return ''
			return dayjs(time).format('MM-DD HH:mm:ss');
		};

		const preview = (url) => {
			if (!url) return;
			uni.previewImage({
				urls: [url],
			});
		};

		const previewWeb = (url) => {
			uni.navigateTo({
				url: '/pages/pm/preview-online?url=' + url + '&isWeb=1',
			});
		};

		const isImage = (url: string) => {
			if (!url) return '';
			const suffix = url.replace(/.*\./, '');
			return ['jpg', 'jpeg', 'png', 'gif', 'svg', 'JPG', 'JPEG', 'PNG', 'GIF', 'SVG', 'WebP'].includes(
				suffix,
			);
		};


		const analysisOptions = ref([]);
		const getAnalysisList = async () => {
			// 获取分析手段
			await analysisList({ size: 20000 }).then((res) => {
				analysisOptions.value = res.data.records.map((item) => {
					const { analysisName, id, equipmentList, analysisIndexUnit, analysisIndexList } = item;
					return { analysisName, analysisId: id, equipmentList, analysisIndexUnit, analysisIndexList };
				});
			});
		}
		//选择物料
		const proIndex = ref(null);
		const proRowIndex = ref(null)
		const showDosageDialog = ref(false)
		const dosageInvName = ref('')
		const showDialog = (rowIndex, index, invName) => {
			dosageInvName.value = invName
			proIndex.value = index
			proRowIndex.value = rowIndex
			showDosageDialog.value = true
		}

		const onSelectMaterial = (e) => {
			if (!e) return;
			stepList.value[proIndex.value].dosageList[proRowIndex.value].unit = e.unit
			stepList.value[proIndex.value].dosageList[proRowIndex.value].invName = e.invName
			stepList.value[proIndex.value].dosageList[proRowIndex.value].invStd = e.invStd
			emit('update:modelValue', stepList.value);
		};

		// 选择分析手段
		const analysisId = ref('')
		const showAnalysisDialog = ref(false)
		const showAnalyDialog = (rowIndex, index, id) => {
			analysisId.value = id
			proIndex.value = index
			proRowIndex.value = rowIndex
			showAnalysisDialog.value = true
		}

		const changeAnalysis = (e, record) => {
			stepList.value[proIndex.value].checkList[proRowIndex.value].itemName = ''
			stepList.value[proIndex.value].checkList[proRowIndex.value].indexEntities = e.analysisIndexList || []
			stepList.value[proIndex.value].checkList[proRowIndex.value].analysisName = e.analysisName;
			stepList.value[proIndex.value].checkList[proRowIndex.value].analysisId = e.analysisId
			emit('update:modelValue', stepList.value);
		};

		// 选择指标
		const showItemName = ref(false);
		const checkItemNam = ref(null);
		const checkItemNamRow = ref(null);
		const itemNamcolumns = ref([]);
		const showItemNameList = (item, index, rowIndex) => {
			checkItemNam.value = null;
			if (!item.analysisId) {
				uni.showToast({
					title: '请先选择检测项目（分析手段）',
					icon: 'none',
					mask: true,
				});
				return;
			}
			const o = analysisOptions.value.find((a) => a.value === item.analysisId);
			itemNamcolumns.value = o && o['analysisIndexList'].map((item) => {
				return {
					name: item,
				};
			});
			checkItemNam.value = index;
			checkItemNamRow.value = rowIndex;
			showItemName.value = true;
		};

		const closeItemNam = () => {
			showItemName.value = false;
		};
		const selectItemNam = (e) => {
			const value = e.item.name;
			stepList.value[checkItemNam.value][checkItemNamRow.value]['itemName'] = value;
			checkItemNam.value = null;
			checkItemNamRow.value = null;
		};


		const listenerScroll = (params) => {
			emit('update:modelDisabled', params.disabled);
		}


		const init = function () {
			getProcessList();
			getAnalysisList()

		};
		init()
		return {
			emit,
			props,
			tableData,
			showEditTable,
			pancelRef,
			dosageInvName,
			unitList,
			isScheme,
			isRecord,
			processList,
			elementForm,
			searchKey,
			stepList,
			fileList,
			elementDTOS,
			dropHandle,
			setProcess,
			preview,
			removeInspection,
			menuAction,
			renderPopLIst,
			zjRenderPopLIst,
			toInspectionList,
			toInspection,
			setStartTime,
			setEndTime,
			onStepChange,
			removeStep,
			onSelectMaterial,
			addDosage,
			removeDosage,
			addParam,
			removeParam,
			formatTime,
			getProcessList,
			changeEndTime,
			addSample,
			removeSample,
			addCheck,
			removeCheck,
			changeAnalysis,
			isImage,
			previewWeb,
			saveElementForm,
			uploadComplete,
			analysisOptions,
			selectItemNam,
			showItemName,
			showItemNameList,
			closeItemNam,
			itemNamcolumns,
			openDrawerVis,
			openDrawer,
			editModal1,
			closeDrawer,
			showDialog,
			showDosageDialog,
			analysisId,
			showAnalyDialog,
			showAnalysisDialog,
			changeCheck,
			changeDosage,
			changeSample,
			searchProcess,
			listenerScroll
		}
	}
})
</script>

<script module="Sortable" lang="renderjs">
	import Sortable from "sortablejs";
	export default {
		name: 'Sortable',
		data() {
			return {
				relatedProcessName: '',
				processList: [],
				stepList: [],
				flag: true,
				sortable: null,
				sortable1: null,
				disabledScroll:false
			}
		},
		mounted() {
			const dragAreaLeft = document.getElementById('dragAreaLeft');
			const dragAreaRight = document.getElementById('dragAreaRight');
			this.sortable = new Sortable(dragAreaLeft, {
				sort: false, //是否可进行拖拽排序
				animation: 200,
				ghostClass: 'dragArea',
				forceFallback: true,
				group: {
					name: 'step',
					pull: 'clone', // To clone: set pull to 'clone'
				},
				scroll: false,
				passThrough:true,
				handle: ".item",
				direction: 'horizontal',
				delay: 100,
				onStart:()=> {
					this.disabledScroll = true
					this.emitListenerScroll(this.$ownerInstance)
				},
				onMove: (evt) => {
					const element = evt.related.children[1].getElementsByClassName('drag-target')
					this.relatedProcessName = element[0].innerText
					if (evt.dragged.innerText == '报检') return false
				},
				onEnd: (e) => {
					this.disabledScroll = false
					this.emitListenerScroll(this.$ownerInstance)
					this.endBj(e, this.$ownerInstance);
				}
			})


			this.sortable1 = new Sortable(dragAreaRight, {
				sort: false, //是否可进行拖拽排序
				animation: 260,
				scroll: true,
				direction: 'horizontal',
				// scroll: false,
				handle: ".drag-target",
				forceFallback: true,
				passThrough:true,
				group: {
					name: 'step',
					put: (e) => {
						return this.$ownerInstance.flag
					}
				},
				filter: '.undraggable',
				delay: 100,
				onAdd: (e) => {
					this.disabledScroll = false
					this.emitListenerScroll(this.$ownerInstance)
					this.emitStepChange(e, this.$ownerInstance);
				},
				// onChange: (e) => {
				// 	console.log(e)
				// 	// this.emitStepChange(e, this.$ownerInstance);
				// },

			})
		},
		methods: {
			getData(value) {
				if (value) {
					this.processList = value
				}

			},
			getList(value) {
				if (value) {
					this.stepList = value
				}

			},
			findStepIndex(name) {
				if (!name) return
				const step = this.stepList.findIndex(item => item.processName == name)
				return step > -1 ? step : null
			},
			findStep(name) {
				if (!name) return
				const step = this.stepList.find(item => item.processName == name)
				return step ? step : null
			},

			findStepIndewx(name) {
				if (!name) return
				const step = this.stepList.findIndex(item => item.processName == name)
				return step > -1 ? step : null
			},
			findProcess(processName) {
				const process = this.processList.find(item => item.processName == processName);
				return process ? process : {}
			},
			emitListenerScroll(instance){
				instance.callMethod('listenerScroll',{disabled:this.disabledScroll})
			},
			endBj(e, instance) {
				let obj;
				obj = this.findProcess(e.item.innerText)
				if (e.item.innerText == '报检') {
					e.newIndex = this.findStepIndex(this.relatedProcessName)
					obj = this.findStep(this.relatedProcessName)
					instance.callMethod('onStepChange', {
						added: {
							processName: e.item.innerText,
							newIndex: e.newIndex,
							isTrusted: e.isTrusted,
							oldIndex: e.oldIndex,
							element: obj,
						}
					});
				}

			},
			emitStepChange(e, instance) {
				let obj;
				obj = this.findProcess(e.item.innerText)
				e.item.classList.add('drag-item');


				instance.callMethod('onStepChange', {
					added: {
						processName: e.item.innerText,
						newIndex: e.newIndex,
						isTrusted: e.isTrusted,
						oldIndex: e.oldIndex,
						element: obj,
					}
				});

				this.$nextTick(() => {
					this.removeStepDom();
				})
			},
			removeStepDom() {
				const nodeToRemove = document.getElementsByClassName('drag-item')[0];
				const parentNode = nodeToRemove && nodeToRemove.parentNode;
				parentNode && parentNode.removeChild(nodeToRemove);
			}

		}

	}
</script>

<style lang="scss" scoped>
@import "./table.scss";
$background: #edeff6;
$nodeWidth: 80px;
$nodeHeight: 45px;
$tableMargin: 50px;
$borderColor: #5f95ff;
$spacing: 20px;

.tools {
	width: 240rpx;
	padding-right: 24rpx;


	.list-group {
		display: flex;
		flex-wrap: wrap;
		// justify-content: center;
		align-content: flex-start;
		height: calc(1100rpx - 90rpx);
		overflow: auto;
		padding-top: 20rpx;
		padding-left: 10rpx;
	}

	.item {
		display: inline-block;
		padding: 6px 12px;
		margin: 4px 0;
		width: 120rpx;
		height: 44rpx;
		line-height: 44rpx;
		text-align: center;
		border: 1px solid $borderColor;
		border-radius: 4px;
		background: #eff4ff;
		color: #333333;
		cursor: context-menu;
		font-size: 0.8rem;
		white-space: nowrap;
		text-overflow: ellipsis;

		&.center-ctrl {
			// width: $nodeHeight;
			// padding: 8px;
			border-radius: calc($nodeHeight/2);
		}
	}
}

.step-panel {
	display: flex;
	height: fit-content;
	height: 1100rpx;

}

.pancel {
	flex: 1;
	display: flex;
	flex-direction: column;
	// align-items: center;
	background-color: #edeff6;
	// height: 100%;
	// max-height: 70vh;
	// max-height: 1200rpx;
	overflow: auto;
	position: relative;
	max-width: calc(98vw - 240rpx);

	.step-list {
		padding-top: 30px;
		// min-height: 600px;
		// width: 100%;
		// width: $nodeWidth;
		// padding-left: 200px;

		// transform: translateX(120px);
		&.no-data {
			width: calc(100%);
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.dragArea {
			// // width: 100%;
			// padding-top: 30px;
			// padding-bottom: 200px;
			box-sizing: content-box;
			display: inline-block;
		}

		// cursor: grabbing;
		.item {
			position: relative;
			min-height: 100px;
			display: flex;
			// justify-content: center;
			// align-items: flex-start;
			padding-bottom: $spacing;

			&.sortable-ghost {
				opacity: 0;
			}

			&.center-ctrl {
				// margin-top: -30px;
				min-height: 90px;

				.content {
					// width: $nodeHeight;
					// border-radius: 50%;
					border-radius: calc($nodeHeight/2);

					&__color {
						color: #52c41a;
						border-color: #52c41a
					}
				}
			}

			.content-container {
				position: relative;

				// top: 30px;
				.remove-btn,
				.btn-box {
					position: absolute;
					top: -10px;
					right: -10px;
					opacity: 1;
					transition: 0.26s;
					z-index: 10;
				}

				.btn-box {
					top: 60rpx;
					right: -20rpx;
				}

				.add-btn {
					width: 56rpx;
					border-radius: 50%;

					&__color {
						color: #52c41a;
						border-color: #52c41a
					}
				}

			}

			.content {
				padding: 12px;
				// width: 100%;
				// height: 100%;
				width: $nodeWidth;
				// height: $nodeHeight;
				// line-height: calc($nodeHeight - 24px);
				text-align: center;
				display: inline-block;
				border: 1px solid $borderColor;
				border-radius: 4px;
				background: #eff4ff;
				color: #333333;
				cursor: move;

				&.undraggable {
					cursor: default;
				}
			}

			.l-table {
				width: 390px;
				min-height: calc($nodeHeight + 30px);
				margin-right: $tableMargin;
				// position: absolute;
				// top: -30px;
				// left: calc(-280px - $tableMargin);
				display: inline-block;
				align-self: flex-start;
				position: relative;
				top: -30px;

				.table-container {
					&.bordered {
						padding: 8px;
						border: 1px solid $borderColor;
						border-radius: 4px;
						background-color: #fff;
					}

					.add-dosage {
						position: absolute;
						right: -16rpx;
						top: -40rpx;
					}
				}
			}

			.r-table {
				width: 1300rpx;
				margin-left: $tableMargin;
				position: relative;
				// top: -30px;
				display: inline-block;
				align-self: flex-start;
				position: relative;
				top: -30px;

				.table-container {
					overflow: inherit;
				}

				&.bordered {
					padding: 8px;
					border: 1px solid $borderColor;
					border-radius: 4px;
					background-color: #fff;
				}

				:deep() {
					.mb1 {
						display: flex;
						align-items: center;
						// margin-bottom: 0;

						.mr4 {
							margin-right: 0
						}

						.wd-picker {
							flex: 1;
						}
					}

					.mt1 {
						margin-top: 10rpx;
					}
				}

				.add-dosage {
					position: absolute;
					right: -16rpx;
					top: -40rpx;
				}

				// .add-param {
				//   position: absolute;
				//   right: -6px;
				//   top: -4px;

				//   .ant-btn {
				//     padding: 0 3px;
				//   }
				// }
			}

			.left-line {
				height: 1px;
				position: absolute;
				top: calc($nodeHeight/2 - 5px);
				background-color: $borderColor;
				width: calc($tableMargin + 3px);
				transform: rotate(20deg);
				right: calc($nodeWidth + 24px);
			}

			.right-line {
				height: 1px;
				position: absolute;
				top: calc($nodeHeight/2 - 5px);
				background-color: $borderColor;
				width: calc($tableMargin + 3px);
				transform: rotate(-20deg);
				left: calc($nodeWidth + 24px);
			}

			.bottom-line {
				width: 5px;
				position: absolute;
				top: $nodeHeight;
				bottom: 0 - $spacing;
				left: 0;
				right: 0;
				margin: auto;

				.line {
					height: calc(100% - 11px);
					width: 1px;
					margin: auto;
					background-color: $borderColor;
				}

				.arrow {
					width: 0;
					height: 0;
					margin-left: -2px;
					border-top: 11px solid $borderColor;
					border-right: 5px solid transparent;
					border-bottom: 5px solid transparent;
					border-left: 5px solid transparent;
				}
			}

			&:last-of-type {
				min-height: $nodeHeight;

				.bottom-line {
					display: none;
				}
			}

			// &.last {
			//   min-height: $nodeHeight;
			//   .bottom-line {
			//     display: none;
			//   }
			// }
		}

		.ctrl-container {
			// padding-right: 20px;
			// position: absolute;
			top: 30px;
			position: relative;

			&.hasData {
				&::after {
					content: '';
					position: absolute;
					width: 1px;
					right: 0;
					top: calc($nodeHeight/2);
					bottom: calc($nodeHeight/2 + 20px);
					background-color: $borderColor;
				}

				&::before {
					content: '';
					position: absolute;
					height: 1px;
					// right: 0;
					left: 280px;
					// left: 0;
					right: -90px;
					top: calc(50% - 10px);
					background-color: $borderColor;
				}
			}

			.ctrlCenterDragArea {
				// padding: 30px 0;
				padding-left: 130px;
				padding-bottom: 20px;
				min-height: calc($nodeHeight);
			}

			.item {
				min-height: auto;
				padding-bottom: 0;
			}

			.center-ctrl {
				// min-height: 90px;
				position: relative;

				&::after {
					content: '';
					position: absolute;
					height: 1px;
					right: 0;
					top: calc($nodeHeight/2);
					left: $nodeWidth + 5px;
					background-color: $borderColor;
				}

				&::before {
					content: '';
					width: 0;
					height: 0;
					margin-left: -2px;
					border-top: 5px solid transparent;
					border-right: 11px solid #5f95ff;
					border-bottom: 5px solid transparent;
					border-left: 5px solid transparent;
					position: absolute;
					right: 0;
					top: calc($nodeHeight/2 - 4px);
					left: $nodeWidth;
				}

				.content {
					border-radius: calc($nodeHeight/2);
				}

				&~.center-ctrl {
					margin-top: 12px;
				}
			}

			.content {
				padding: 12px;
				// width: 100%;
				// height: 100%;
				width: $nodeWidth;
				height: $nodeHeight;
				line-height: calc($nodeHeight - 24px);
				text-align: center;
				display: inline-block;
				border: 1px solid $borderColor;
				border-radius: 4px;
				background: #eff4ff;
				color: #333333;
				// cursor: move;
				cursor: default;
				// &.undraggable {
				//   cursor: default;
				// }
			}
		}
	}

	:deep(.process-popover) {
		.ant-popover-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.select-wrap {
		flex: 1;

		.placeholder {
			color: #bfbfbf;
			font-size: 30rpx;
		}

		.input {
			display: flex;
			padding-left: 20rpx;
			align-items: center;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 8rpx;

			.label {
				height: 100%;
				flex: 1;
				white-space: no-wrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			&.border {
				border: 1px solid #dcdfe6;
			}
		}

		.arrow {
			font-size: 28rpx;
			color: #dcdfe6;
			font-size: 30rpx;
			width: 60rpx;
			text-align: center;
		}

	}
}

.list-picture {
	.list-item {
		position: relative;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		float: left;
		width: 200px;
		height: 66px;
		padding: 8px;
		margin-right: 8px;
		border: 1px solid #d9d9d9;
		border-radius: 8px;

		.list-item-thumbnail {
			flex: none;
			width: 48px;
			height: 48px;
			overflow: hidden;
			text-align: center;
			text-overflow: ellipsis;
			white-space: nowrap;

			span {
				display: inline-block;
				width: 48px;
				height: 100%;
				line-height: 48px;

				&.txt {
					background-image: url('../../../../static/txtM.png');
					background-repeat: no-repeat;
					background-size: 100% 100%;
				}
			}
		}

		.list-item-name {
			flex: auto;
			padding: 0 8px;
			overflow: hidden;
			line-height: 1.5714285714285714;
			text-overflow: ellipsis;
			white-space: nowrap;
			transition: all 0.3s;
		}
	}
}



.cu-dialog {
	font-size: 28rpx;

	.cu-bar {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 208rpx;
		padding: 0 30rpx;
	}

	.cu-bar .search-form {
		display: flex;
		flex: 1;
		align-items: center;
		height: 128rpx;
		margin: 0 30rpx;
		overflow: hidden;
		/* padding: 0 40rpx; */
		font-size: 24rpx;
		line-height: 128rpx;
		color: #333;
		background-color: white;
	}

	.search-container .filter-icon {
		padding: 0 18rpx;
		margin: 0;
		font-size: 40rpx;
		color: #007aff;
		border-left: 1rpx solid #f3f3f3;
	}

	.cu-dialog>.cu-bar:first-child .action {
		margin-right: 20rpx;
	}

	.filter_container {
		padding: 32rpx;
		padding-bottom: 64rpx;
		text-align: left;
		background-color: #fff;

		.block {
			~.block {
				margin-top: 32rpx;
			}

			.label {
				margin-bottom: 20rpx;
				font-weight: bold;
			}
		}

		.row {
			// display: flex;
			// flex-wrap: wrap;
			// align-items: center;
			// justify-content: space-between;

			input {
				flex: 1;
				height: 33rpx;
				padding: 16rpx 12rpx;
				font-size: 26rpx !important;
				background-color: #f7f7f7;
				border: 1rpx solid #f7f7f7;
				border-radius: 8rpx;

				.input-placeholder {
					color: #8a929f;
				}
			}

			.btn {
				flex: 1;
				padding: 16rpx;
				color: #999;
				text-align: center;
				background-color: #f7f7f7;
				border: 1rpx solid #dedede;
				border-radius: 8rpx;

				~.btn {
					margin-left: 24rpx;
				}

				&.primary {
					color: #fff;
					background-color: #007aff;
					border-color: #007aff;
				}
			}
		}
	}
}

.td__abandon {
	position: relative;

	&::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		height: 0;
		border-bottom: 1px solid #f56c6c;
		z-index: 1;
	}
}
</style>
